<template>
  <div class="admin-review-container">
    <header class="admin-header">
      <div class="admin-header-content">
        <div class="admin-logo">
          <div class="admin-logo-icon">
            <i class="fas fa-user-shield"></i>
          </div>
          <h1>管理员审核中心</h1>
        </div>

        <div class="admin-user-info">
          <div class="admin-user-avatar">管</div>
          <div class="admin-user-details">
            <div class="admin-user-name">管理员</div>
            <div class="admin-user-role">审核专员</div>
          </div>
          <button class="admin-logout-btn" @click="logout" title="退出登录">
            <i class="fas fa-sign-out-alt"></i>
            <span>退出</span>
          </button>
        </div>
      </div>
    </header>

    <main class="admin-main-content">
      <div class="admin-page-content">
        <h2 class="admin-page-title">
          <i class="fas fa-tasks"></i>
          待审核项目概览
        </h2>

        <!-- 统计卡片 -->
        <div class="admin-stats-cards">
          <div class="admin-stat-card" @click="switchPage('awards-page')"
            :class="{ active: currentPage === 'awards-page' }">
            <div class="admin-stat-icon admin-icon-awards">
              <i class="fas fa-gift"></i>
            </div>
            <div class="admin-stat-info">
              <h3>充值奖励管理</h3>
              <div class="admin-stat-value">配置</div>
              <div class="admin-stat-desc">管理充值奖励规则</div>
            </div>
            <div class="admin-stat-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="admin-stat-card" @click="switchPage('shop-page')"
            :class="{ active: currentPage === 'shop-page' }">
            <div class="admin-stat-icon admin-icon-business">
              <i class="fas fa-store"></i>
            </div>
            <div class="admin-stat-info">
              <h3>待审核商家</h3>
              <div class="admin-stat-value">{{ safeStats.business }}</div>
              <div class="admin-stat-desc">等待审核的商家申请</div>
            </div>
            <div class="admin-stat-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="admin-stat-card" @click="switchPage('food-page')"
            :class="{ active: currentPage === 'food-page' }">
            <div class="admin-stat-icon admin-icon-food">
              <i class="fas fa-utensils"></i>
            </div>
            <div class="admin-stat-info">
              <h3>待审核食品</h3>
              <div class="admin-stat-value">{{ safeStats.food }}</div>
              <div class="admin-stat-desc">等待审核的食品信息</div>
            </div>
            <div class="admin-stat-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="admin-stat-card" @click="switchPage('comment-page')"
            :class="{ active: currentPage === 'comment-page' }">
            <div class="admin-stat-icon admin-icon-comment">
              <i class="fas fa-comments"></i>
            </div>
            <div class="admin-stat-info">
              <h3>待审核评论</h3>
              <div class="admin-stat-value">{{ safeStats.comment }}</div>
              <div class="admin-stat-desc">等待审核的用户评论</div>
            </div>
            <div class="admin-stat-arrow">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </div>

        <!-- 商家审核 -->
        <transition name="admin-fade" mode="out-in">
          <div v-show="currentPage === 'shop-page'" key="shop-page" class="admin-page-section">
            <div class="admin-section-header">
              <h3 class="admin-page-title">
                <i class="fas fa-store"></i>
                商家信息修改审核
              </h3>
              <div class="admin-section-badge">{{ safeBusinessList.length }} 项待审核</div>
            </div>

            <div v-if="loading" class="admin-loading">
              <div class="admin-loading-spinner"></div>
              <p>加载中...</p>
            </div>

            <div v-else-if="safeBusinessList.length === 0" class="admin-empty-state">
              <div class="admin-empty-icon">
                <i class="fas fa-check-circle"></i>
              </div>
              <p>暂无待审核的商家信息</p>
              <p class="admin-empty-desc">所有商家申请已处理完毕</p>
            </div>

            <div v-else class="admin-review-list">
              <div v-for="b in safeBusinessList" :key="'b-' + b.id" class="admin-review-card">
                <div class="admin-card-header">
                  <div class="admin-shop-info">
                    <div class="admin-shop-name">{{ b.businessName || '未命名商家' }}</div>
                    <div class="admin-shop-id">ID: {{ b.id || '未知' }}</div>
                  </div>
                  <div class="admin-time">
                    <i class="fas fa-clock"></i>
                    提交于 {{ b.updateTime.split('.')[0] || '未知时间' }}
                  </div>
                </div>
                <div class="admin-card-content">
                  <div class="admin-field">
                    <div class="admin-field-label">申请内容</div>
                    <div class="admin-field-value">
                      <div class="admin-field-item">
                        <span class="admin-field-key">名称：</span>
                        <span class="admin-field-text">{{ b.businessName || '未提供' }}</span>
                      </div>
                      <div class="admin-field-item">
                        <span class="admin-field-key">地址：</span>
                        <span class="admin-field-text">{{ b.businessAddress || '未提供' }}</span>
                      </div>
                      <div class="admin-field-item">
                        <span class="admin-field-key">简介：</span>
                        <span class="admin-field-text">{{ b.businessExplain || '未提供' }}</span>
                      </div>
                      <div class="admin-field-item">
                        <span class="admin-field-key">起送价：</span>
                        <span class="admin-field-text">¥{{ b.startPrice || '0' }}</span>
                      </div>
                      <div class="admin-field-item">
                        <span class="admin-field-key">配送费：</span>
                        <span class="admin-field-text">¥{{ b.deliveryPrice || '0' }}</span>
                      </div>
                      <div v-if="b.businessImg" class="admin-field-item admin-field-image">
                        <span class="admin-field-key">图片：</span>
                        <img :src="b.businessImg" alt="商家图片" class="admin-review-img" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="admin-actions">
                  <button class="admin-btn admin-btn-reject" @click="rejectBusiness(b)">
                    <i class="fas fa-times"></i>不通过
                  </button>
                  <button class="admin-btn admin-btn-approve" @click="approveBusiness(b)">
                    <i class="fas fa-check"></i>通过
                  </button>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <!-- 食品审核 -->
        <transition name="admin-fade" mode="out-in">
          <div v-show="currentPage === 'food-page'" key="food-page" class="admin-page-section">
            <div class="admin-section-header">
              <h3 class="admin-page-title">
                <i class="fas fa-utensils"></i>
                食品信息修改审核
              </h3>
              <div class="admin-section-badge">{{ safeFoodList.length }} 项待审核</div>
            </div>

            <div v-if="loading" class="admin-loading">
              <div class="admin-loading-spinner"></div>
              <p>加载中...</p>
            </div>

            <div v-else-if="safeFoodList.length === 0" class="admin-empty-state">
              <div class="admin-empty-icon">
                <i class="fas fa-check-circle"></i>
              </div>
              <p>暂无待审核的食品信息</p>
              <p class="admin-empty-desc">所有食品申请已处理完毕</p>
            </div>

            <div v-else class="admin-review-list">
              <div v-for="f in safeFoodList" :key="'f-' + f.id" class="admin-review-card">
                <div class="admin-card-header">
                  <div class="admin-shop-info">
                    <div class="admin-shop-name">{{ (f?.business.businessName || '未知商家') + ' - ' + (f.foodName ||
                      '未知食品') }}</div>
                    <div class="admin-shop-id">ID: {{ f.id || '未知' }}</div>
                  </div>
                  <div class="admin-time">
                    <i class="fas fa-clock"></i>
                    提交于 {{ f.updateTime.split('.')[0] || '未知时间' }}
                  </div>
                </div>
                <div class="admin-card-content">
                  <div class="admin-field">
                    <div class="admin-field-label">申请内容</div>
                    <div class="admin-field-value">
                      <div class="admin-field-item">
                        <span class="admin-field-key">名称：</span>
                        <span class="admin-field-text">{{ f.foodName || '未提供' }}</span>
                      </div>
                      <div class="admin-field-item">
                        <span class="admin-field-key">描述：</span>
                        <span class="admin-field-text">{{ f.foodExplain || '未提供' }}</span>
                      </div>
                      <div class="admin-field-item">
                        <span class="admin-field-key">价格：</span>
                        <span class="admin-field-text">¥{{ f.foodPrice || '0' }}</span>
                      </div>
                      <div v-if="f.foodImg" class="admin-field-item admin-field-image">
                        <span class="admin-field-key">图片：</span>
                        <img :src="f.foodImg" alt="食品图片" class="admin-review-img" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="admin-actions">
                  <button class="admin-btn admin-btn-reject" @click="rejectFood(f)">
                    <i class="fas fa-times"></i>不通过
                  </button>
                  <button class="admin-btn admin-btn-approve" @click="approveFood(f)">
                    <i class="fas fa-check"></i>通过
                  </button>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <!-- 评论审核 -->
        <transition name="admin-fade" mode="out-in">
          <div v-show="currentPage === 'comment-page'" key="comment-page" class="admin-page-section">
            <div class="admin-section-header">
              <h3 class="admin-page-title">
                <i class="fas fa-comments"></i>
                评论删除审核
              </h3>
              <div class="admin-section-badge">{{ safeCommentList.length }} 项待审核</div>
            </div>

            <!-- <div class="admin-refresh-btn">
              <button class="admin-refresh-button" @click="loadComment">
                <i class="fas fa-sync-alt"></i> 刷新评论列表
              </button>
            </div> -->

            <div v-if="loading" class="admin-loading">
              <div class="admin-loading-spinner"></div>
              <p>加载中...</p>
            </div>

            <div v-else-if="safeCommentList.length === 0" class="admin-empty-state">
              <div class="admin-empty-icon">
                <i class="fas fa-check-circle"></i>
              </div>
              <p>暂无待审核的评论</p>
              <p class="admin-empty-desc">所有评论申请已处理完毕</p>
            </div>

            <div v-else class="admin-review-list">
              <div v-for="c in safeCommentList" :key="'c-' + c.id" class="admin-review-card">
                <div class="admin-card-header">
                  <div class="admin-user-info-small">
                    <div class="admin-user-avatar-small">{{ (c.user?.username?.charAt(0) || '?') }}</div>
                    <div class="admin-user-details-small">
                      <div class="admin-user-name-small">{{ c.user?.username || '未知用户' }}</div>
                      <div class="admin-user-date">{{ c.orderDate || '未知日期' }}</div>
                    </div>
                  </div>
                  <div class="admin-time">
                    <i class="fas fa-flag"></i>
                    被举报评论
                  </div>
                </div>

                <div class="admin-card-content">
                  <!-- 评分 -->
                  <div class="admin-field">
                    <div class="admin-field-label">评分</div>
                    <div class="admin-field-value">
                      <div class="admin-rating">
                        <span class="admin-rating-stars" v-html="starHtml(c.star)"></span>
                        <span class="admin-rating-text">({{ c.star || 0 }}/5)</span>
                      </div>
                    </div>
                  </div>

                  <!-- 评论内容 -->
                  <div class="admin-field">
                    <div class="admin-field-label">评论内容</div>
                    <div class="admin-field-value admin-comment-content">{{ c.comment || '无评论内容' }}</div>
                  </div>

                  <div class="admin-field">
                    <div class="admin-field-label">举报原因</div>
                    <div class="admin-field-value">{{ c.reportReason || '商家认为内容不实' }}</div>
                  </div>
                </div>

                <div class="admin-actions">
                  <button class="admin-btn admin-btn-reject" @click="reviewComment(c, 1)">
                    <i class="fas fa-check"></i>保留评论
                  </button>
                  <button class="admin-btn admin-btn-approve" @click="reviewComment(c, 0)">
                    <i class="fas fa-trash"></i>删除评论
                  </button>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <!-- 充值奖励管理 -->
        <transition name="admin-fade" mode="out-in">
          <div v-show="currentPage === 'awards-page'" key="awards-page" class="admin-page-section">
            <div class="admin-section-header">
              <h3 class="admin-page-title">
                <i class="fas fa-gift"></i>
                充值奖励规则管理
              </h3>
              <div class="admin-section-badge">{{ safeAwardsList.length }} 条规则</div>
              <button class="admin-btn admin-btn-primary" @click="showAddAwardsModal = true">
                <i class="fas fa-plus"></i>添加规则
              </button>
            </div>

            <div v-if="loading" class="admin-loading">
              <div class="admin-loading-spinner"></div>
              <p>加载中...</p>
            </div>

            <div v-else-if="safeAwardsList.length === 0" class="admin-empty-state">
              <div class="admin-empty-icon">
                <i class="fas fa-gift"></i>
              </div>
              <p>暂无充值奖励规则</p>
              <p class="admin-empty-desc">点击"添加规则"按钮创建新的充值奖励规则</p>
            </div>

            <div v-else class="admin-review-list">
              <div v-for="award in safeAwardsList" :key="'award-' + award.id" class="admin-review-card">
                <div class="admin-card-header">
                  <div class="admin-shop-info">
                    <div class="admin-shop-name">奖励规则 #{{ award.id }}</div>
                    <div class="admin-shop-id">ID: {{ award.id }}</div>
                  </div>
                </div>
                <div class="admin-card-content">
                  <div class="admin-field">
                    <div class="admin-field-label">充值金额</div>
                    <div class="admin-field-value">
                      <input 
                        v-model.number="award.recharge_amount" 
                        type="number" 
                        step="0.01"
                        min="0"
                        class="admin-input"
                        placeholder="请输入充值金额"
                      />
                    </div>
                  </div>
                  <div class="admin-field">
                    <div class="admin-field-label">奖励金额</div>
                    <div class="admin-field-value">
                      <input 
                        v-model.number="award.award_amount" 
                        type="number" 
                        step="0.01"
                        min="0"
                        class="admin-input"
                        placeholder="请输入奖励金额"
                      />
                    </div>
                  </div>
                </div>
                <div class="admin-actions">
                  <button class="admin-btn admin-btn-reject" @click="deleteAwards(award)">
                    <i class="fas fa-trash"></i>删除
                  </button>
                  <button class="admin-btn admin-btn-approve" @click="updateAwards(award)">
                    <i class="fas fa-save"></i>保存
                  </button>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <!-- 添加奖励规则模态框 -->
        <div v-if="showAddAwardsModal" class="admin-modal-overlay">
          <div class="admin-modal">
            <div class="admin-modal-header">
              <h3>添加充值奖励规则</h3>
              <button class="admin-modal-close" @click="showAddAwardsModal = false">
                <i class="fas fa-times"></i>
              </button>
            </div>
            <div class="admin-modal-body">
              <div class="admin-form-group">
                <label class="admin-form-label">ID:</label>
                <input 
                  v-model.number="newAwards.id" 
                  type="number" 
                  class="admin-input"
                  placeholder="请输入规则ID"
                />
              </div>
              <div class="admin-form-group">
                <label class="admin-form-label">充值金额:</label>
                <input 
                  v-model.number="newAwards.recharge_amount" 
                  type="number" 
                  step="0.01"
                  min="0"
                  class="admin-input"
                  placeholder="请输入充值金额"
                />
              </div>
              <div class="admin-form-group">
                <label class="admin-form-label">奖励金额:</label>
                <input 
                  v-model.number="newAwards.award_amount" 
                  type="number" 
                  step="0.01"
                  min="0"
                  class="admin-input"
                  placeholder="请输入奖励金额"
                />
              </div>
            </div>
            <div class="admin-modal-footer">
              <button class="admin-btn admin-btn-cancel" @click="showAddAwardsModal = false">
                取消
              </button>
              <button class="admin-btn admin-btn-primary" @click="addAwards">
                添加
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="admin-footer">
      <p>© 2025 TJU软工综合实践24组管理系统 | v1.0</p>
    </footer>


  </div>
</template>

<script>
export default {
  name: 'Administrator',
  data() {
    return {
      currentPage: 'shop-page',
      stats: { business: 0, food: 0, comment: 0 },
      businessList: [],
      foodList: [],
      commentList: [],
      awardsList: [],
      loading: false,
      showAddAwardsModal: false,
      newAwards: {
        id: '',
        recharge_amount: '',
        award_amount: ''
      }
    };
  },
  created() {
    this.token = localStorage.getItem('token');
    if (!this.token) {
      this.$router.replace('/login');
      return;
    }
    this.loadStats();
    this.switchPage('shop-page');
  },
  computed: {
    // 安全的计算属性，防止null读取错误
    safeAwardsList() {
      return Array.isArray(this.awardsList) ? this.awardsList : [];
    },
    safeStats() {
      return {
        business: this.stats.business || 0,
        food: this.stats.food || 0,
        comment: this.stats.comment || 0
      };
    },
    safeBusinessList() {
      return Array.isArray(this.businessList) ? this.businessList : [];
    },
    safeFoodList() {
      return Array.isArray(this.foodList) ? this.foodList : [];
    },
    safeCommentList() {
      return Array.isArray(this.commentList) ? this.commentList : [];
    }
  },
  methods: {
    /* 退出登录 */
    logout() {
      localStorage.removeItem('token');
      this.$router.push('/index');
    },
    getBusinessName(id) {
      let name = '';
      this.$axios.get(`businesses/${id}`, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        name = res.data.data.businessName;
        //console.log(res.data.data.businessName);
      }).catch(err => {
        console.error('获取商家统计失败:', err);
      });
      console.log(name);
      return name;
    },

    /* 统计 */
    starHtml(star) {
      const starValue = star || 0;
      return '★'.repeat(starValue) + '☆'.repeat(5 - starValue);
    },

    loadStats() {
      // 商家统计
      this.$axios.get('/businesses/reviewing', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        this.stats.business = (res.data && res.data.data && Array.isArray(res.data.data)) ?
          res.data.data.length : 0;
      }).catch(err => {
        console.error('获取商家统计失败:', err);
        this.stats.business = 0;
      });

      // 食品统计
      this.$axios.get('/foods/reviewing', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        this.stats.food = (res.data && res.data.data && Array.isArray(res.data.data)) ?
          res.data.data.length : 0;
      }).catch(err => {
        console.error('获取食品统计失败:', err);
        this.stats.food = 0;
      });

      // 评论统计
      this.$axios.get('/comments', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        const data = (res.data && res.data.data && Array.isArray(res.data.data)) ?
          res.data.data : [];
        this.stats.comment = data.filter(c => !c.reviewed).length;
      }).catch(err => {
        console.error('获取评论统计失败:', err);
        this.stats.comment = 0;
      });
    },

    /* 切换页面并拉取对应列表 */
    switchPage(page) {
      this.currentPage = page;
      this.loading = true;

      // 模拟加载延迟
      setTimeout(() => {
        if (page === 'shop-page') this.loadBusiness();
        else if (page === 'food-page') this.loadFood();
        else if (page === 'comment-page') this.loadComment();
        else if (page === 'awards-page') this.loadAwards();
        this.loading = false;
      }, 500);
    },

    loadBusiness() {
      this.$axios.get('/businesses/reviewing', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        this.businessList = (res.data && res.data.data && Array.isArray(res.data.data)) ?
          res.data.data.filter(Boolean) : [];
      }).catch(err => {
        console.error('加载商家列表失败:', err);
        this.businessList = [];
        if (err.response?.status === 401) {
          alert('权限不足，即将返回个人中心');
          return this.$router.replace('/userProfile');
        }
      });
    },

    /* ===== 食品审核 ===== */
    loadFood() {
      this.$axios.get('/foods/reviewing', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        this.foodList = (res.data && res.data.data && Array.isArray(res.data.data)) ?
          res.data.data.filter(Boolean) : [];
      }).catch(err => {
        console.error('加载食品列表失败:', err);
        this.foodList = [];
        if (err.response?.status === 401) {
          alert('权限不足，即将返回个人中心');
          return this.$router.replace('/userProfile');
        }
      });
    },

    /* ===== 评论审核 ===== */
    loadComment() {
      this.$axios.get('/comments', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
        .then(res => {
          const list = (res.data && res.data.data && Array.isArray(res.data.data)) ?
            res.data.data : [];
          this.commentList = list.filter(c => !c.reviewed);
        })
        .catch(err => {
          console.error('加载评论列表失败:', err);
          this.commentList = [];
          if (err.response?.status === 401) {
            alert('权限不足，即将返回个人中心');
            return this.$router.replace('/userProfile');
          }
        });
    },

    /* 商家审核 */
    approveBusiness(b) {
      if (!b || !b.id) {
        alert('商家信息不完整，无法审核');
        return;
      }

      this.$axios.put(`/businesses/${b.id}/status/closing`, null, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(() => {
        alert('已通过');
        this.loadBusiness();
        this.loadStats();
      }).catch(err => {
        console.error('审核商家失败:', err);
        alert('审核失败，请重试');
      });
    },

    rejectBusiness(b) {
      if (!b || !b.id) {
        alert('商家信息不完整，无法审核');
        return;
      }

      this.$axios.put(`/businesses/${b.id}/status/banned`, null, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(() => {
        alert('已拒绝');
        this.loadBusiness();
        this.loadStats();
      }).catch(err => {
        console.error('拒绝商家失败:', err);
        alert('操作失败，请重试');
      });
    },

    /* 食品审核 */
    approveFood(f) {
      if (!f || !f.id) {
        alert('食品信息不完整，无法审核');
        return;
      }

      this.$axios.put(`/foods/status/${f.id}/${'soldout'}`,
        {},
        { headers: { Authorization: `Bearer ${this.token}` } }
      ).then(() => {
        alert('已通过');
        this.loadFood();
        this.loadStats();
      }).catch(err => {
        console.error('审核食品失败:', err);
        alert('审核失败，请重试');
      });
    },

    /* 食品审核 – 拒绝 */
    rejectFood(f) {
      if (!f || !f.id) {
        alert('食品信息不完整，无法审核');
        return;
      }

      this.$axios.put(`/foods/status/${f.id}/${'rejected'}`,
        {},
        { headers: { Authorization: `Bearer ${this.token}` } }
      ).then(() => {
        alert('未通过');
        this.loadFood();
        this.loadStats();
      }).catch(err => {
        console.error('拒绝食品失败:', err);
        alert('操作失败，请重试');
      });
    },

    /* 评论审核 */
    reviewComment(c, result) {
      if (!c || !c.id) {
        alert('评论信息不完整，无法审核');
        return;
      }

      const tip = result === 0 ? '删除' : '保留';
      this.$axios
        .put(`/comments/${c.id}/${result}`, null, {
          headers: { Authorization: `Bearer ${this.token}` }
        })
        .then(res => {
          if (res.data && res.data.success) {
            alert(`评论已${tip}`);
            this.loadComment();
            this.loadStats();
          } else {
            alert(res.data?.message || `${tip}失败`);
          }
        })
        .catch(err => {
          console.error('审核评论失败:', err);
          const msg = err.response?.data?.message || err.message || '网络异常';
          alert(msg);
        });
    },

    /* ===== 充值奖励管理 ===== */
    loadAwards() {
      this.$axios.get('/awards/get', { // 修改为正确的接口路径
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(res => {
        console.log('奖励规则数据:', res.data);
        // 确保数据是数组，并处理可能的嵌套结构
        let data = res.data;
        if (data && data.data) {
          data = data.data; // 如果数据在data字段中
        }
        this.awardsList = Array.isArray(data) ? 
          data.filter(Boolean).map(item => ({
            ...item,
            recharge_amount: parseFloat(item.recharge_amount) || 0,
            award_amount: parseFloat(item.award_amount) || 0
          })) : [];
      }).catch(err => {
        console.error('加载奖励规则失败:', err);
        this.awardsList = [];
        if (err.response?.status === 401) {
          alert('权限不足，即将返回个人中心');
          return this.$router.replace('/userProfile');
        }
      });
    },

    /* 更新奖励规则 */
    updateAwards(award) {
      if (!award || !award.id) {
        alert('奖励规则信息不完整');
        return;
      }

      const rechargeAmount = parseFloat(award.recharge_amount);
      const awardAmount = parseFloat(award.award_amount);

      if (isNaN(rechargeAmount) || isNaN(awardAmount) || rechargeAmount < 0 || awardAmount < 0) {
        alert('请输入有效的金额');
        return;
      }

      this.$axios.post(`/awards/change`, null, {
        params: {
          id: award.id,
          recharge_amount: rechargeAmount,
          award_amount: awardAmount
        },
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then(() => {
        alert('更新成功');
        this.loadAwards();
      }).catch(err => {
        console.error('更新奖励规则失败:', err);
        alert('更新失败，请重试');
      });
    },

    /* 添加奖励规则 */
    addAwards() {
      if (!this.newAwards.id || !this.newAwards.recharge_amount || !this.newAwards.award_amount) {
        alert('请填写完整信息');
        return;
      }

      const id = parseInt(this.newAwards.id);
      const rechargeAmount = parseFloat(this.newAwards.recharge_amount);
      const awardAmount = parseFloat(this.newAwards.award_amount);
      if (isNaN(id) || id <= 0) {
        alert('请输入有效的ID');
        return;
      }
      if (isNaN(rechargeAmount) || isNaN(awardAmount) || rechargeAmount < 0 || awardAmount < 0) {
        alert('请输入有效的金额');
        return;
      }

      // 使用 URL 参数而不是请求体
      this.$axios.post(`/awards/add`, null, {
        params: {
          id: id,
          recharge_amount: rechargeAmount,
          award_amount: awardAmount
        },
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then((res) => {
        if (res.data) {
          alert('添加成功');
          this.showAddAwardsModal = false;
          this.newAwards = { id: '', recharge_amount: '', award_amount: '' };
          this.loadAwards(); // 重新加载列表
        } else {
          alert('添加失败');
        }
      }).catch(err => {
        console.error('添加奖励规则失败:', err);
        alert('添加失败，请重试');
      });
    },

    /* 删除奖励规则 */
    deleteAwards(award) {
      if (!award || !award.id) {
        alert('奖励规则信息不完整');
        return;
      }

      if (!confirm(`确定要删除奖励规则 #${award.id} 吗？`)) {
        return;
      }

      this.$axios.post(`/awards/delete`, null, {
        params: {
          id: award.id
        },
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      }).then((res) => {
        if (res.data) {
          alert('删除成功');
          this.loadAwards(); // 重新加载列表
        } else {
          alert('删除失败');
        }
      }).catch(err => {
        console.error('删除奖励规则失败:', err);
        alert('删除失败，请重试');
      });
    },
  }
};
</script>

<style scoped>
/* 使用更具体的前缀防止与全局样式冲突 */
.admin-review-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.admin-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 5%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-main-content {
  flex: 1;
  padding: 24px 5%;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 80px;
}

.admin-footer {
  text-align: center;
  padding: 20px;
  background: white;
  color: #6c757d;
  margin-top: auto;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
  font-size: 14px;
}

.admin-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.admin-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-logo-icon {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.admin-logo h1 {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-user-details {
  display: flex;
  flex-direction: column;
}

.admin-user-name {
  font-weight: 600;
  font-size: 14px;
}

.admin-user-role {
  font-size: 12px;
  opacity: 0.9;
}

.admin-logout-btn {
  /* 保持原有基础样式 */
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 85px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: auto;
  padding: 0 12px;
  overflow: hidden;
  box-sizing: border-box;

  /* 新增：确保内部元素垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 使用gap替代margin更简洁 */
}

.admin-logout-btn i {
  font-size: 15px;
  color: white;
  transition: all 0.2s ease;
}

.admin-logout-btn span {
  color: white;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.admin-logout-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);

}

.admin-page-content {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  min-height: 500px;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.admin-page-title {
  color: #495057;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
}

.admin-page-title i {
  color: #667eea;
}

.admin-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.admin-stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.admin-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.admin-stat-card.active::before {
  opacity: 1;
}

.admin-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border-color: #e9ecef;
}

.admin-stat-card.active {
  border-color: #667eea;
  background: #f8f9fe;
}

.admin-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.admin-icon-business {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.admin-icon-food {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.admin-icon-comment {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.admin-icon-awards {
  background: linear-gradient(135deg, #ffd700, #ffa500);
}

.admin-stat-info {
  flex: 1;
}

.admin-stat-info h3 {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
  font-weight: 500;
}

.admin-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #495057;
  margin-bottom: 2px;
}

.admin-stat-desc {
  font-size: 12px;
  color: #adb5bd;
}

.admin-stat-arrow {
  color: #adb5bd;
  transition: all 0.3s ease;
}

.admin-stat-card:hover .admin-stat-arrow {
  color: #667eea;
  transform: translateX(3px);
}

.admin-page-section {
  animation: admin-fadeIn 0.5s ease;
}

@keyframes admin-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-section-badge {
  background: #667eea;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.admin-review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-review-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border-left: 4px solid #667eea;
}

.admin-review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-shop-info {
  flex: 1;
}

.admin-shop-name {
  font-weight: 600;
  color: #495057;
  font-size: 18px;
  margin-bottom: 5px;
}

.admin-shop-id {
  color: #6c757d;
  font-size: 14px;
}

.admin-time {
  color: #6c757d;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-user-info-small {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.admin-user-details-small {
  display: flex;
  flex-direction: column;
}

.admin-user-name-small {
  font-weight: 600;
  color: #495057;
}

.admin-user-date {
  color: #6c757d;
  font-size: 12px;
}

.admin-card-content {
  margin-bottom: 15px;
}

.admin-field {
  margin-bottom: 15px;
}

.admin-field-label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-field-value {
  color: #6c757d;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 15px;
}

.admin-field-item {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-start;
}

.admin-field-item:last-child {
  margin-bottom: 0;
}

.admin-field-key {
  font-weight: 600;
  color: #495057;
  min-width: 70px;
}

.admin-field-text {
  flex: 1;
}

.admin-field-image {
  flex-direction: column;
  align-items: flex-start;
}

.admin-review-img {
  max-width: 200px;
  margin-top: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-rating-stars {
  color: #ffc107;
  font-size: 18px;
}

.admin-rating-text {
  color: #6c757d;
  font-size: 14px;
}

.admin-comment-content {
  line-height: 1.5;
  font-style: italic;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  gap: 10px;
}

.admin-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.admin-btn-approve {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
}

.admin-btn-approve:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.admin-btn-reject {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.admin-btn-reject:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.admin-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 8px 0;
  backdrop-filter: blur(10px);
}

.admin-nav-item {
  padding: 10px 0;
  text-align: center;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #6c757d;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}

.admin-nav-item.active {
  color: #667eea;
}

.admin-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: #667eea;
  border-radius: 0 0 3px 3px;
}

.admin-nav-item i {
  font-size: 20px;
  transition: all 0.3s ease;
}

.admin-nav-item:hover {
  color: #667eea;
}

.admin-nav-item:hover i {
  transform: translateY(-2px);
}

.admin-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.admin-empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: #adb5bd;
}

.admin-empty-state p {
  font-size: 16px;
  margin-bottom: 5px;
}

.admin-empty-desc {
  font-size: 14px;
  color: #adb5bd;
}

.admin-loading {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.admin-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-left: 4px solid #667eea;
  border-radius: 50%;
  animation: admin-spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes admin-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.admin-refresh-btn {
  margin-bottom: 20px;
}

.admin-refresh-button {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.admin-refresh-button:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 动画效果 */
.admin-fade-enter-active,
.admin-fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.admin-fade-enter-from,
.admin-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .admin-main-content {
    padding: 20px 4%;
  }
}

@media (max-width: 992px) {
  .admin-header-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .admin-stats-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-header {
    padding: 12px 4%;
  }

  .admin-main-content {
    padding: 16px 3%;
  }

  .admin-page-content {
    padding: 20px;
    border-radius: 12px;
  }

  .admin-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-time {
    margin-top: 5px;
  }

  .admin-actions {
    flex-direction: column;
  }

  .admin-btn {
    width: 100%;
    justify-content: center;
  }

  .admin-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-section-badge {
    align-self: flex-start;
  }
}

@media (max-width: 576px) {
  .admin-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .admin-user-info {
    align-self: stretch;
    justify-content: center;
    margin-top: 10px;
  }

  .admin-nav-item span {
    display: none;
  }

  .admin-nav-item i {
    font-size: 24px;
  }
}

/* 模态框样式 */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-modal {
  background: white;
  border-radius: 12px;
  padding: 0;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.admin-modal-header h3 {
  margin: 0;
  color: #495057;
}

.admin-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #6c757d;
  cursor: pointer;
  padding: 5px;
}

.admin-modal-close:hover {
  color: #495057;
}

.admin-modal-body {
  padding: 20px;
}

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e9ecef;
}

/* 表单样式 */
.admin-form-group {
  margin-bottom: 15px;
}

.admin-form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #495057;
}

.admin-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.admin-input:focus {
  outline: none;
  border-color: #667eea;
}

/* 按钮样式扩展 */
.admin-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.admin-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.admin-btn-cancel {
  background: #6c757d;
  color: white;
}

.admin-btn-cancel:hover {
  background: #5a6268;
}
</style>